<template>
    <div class="header">
    <div class="searchHeader">
        <span class="location">淄博</span>
        <input type="text" @click="search">
        <span class="erWeiMa">
            <svg t="1665452054195" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3385"><path d="M160 416a32 32 0 0 1-32-32V256a128.1 128.1 0 0 1 128-128h128a32 32 0 1 1 0 64H256a64.1 64.1 0 0 0-64 64v128a32 32 0 0 1-32 32zM384 896H256a128.1 128.1 0 0 1-128-128V640a32 32 0 1 1 64 0v128a64.1 64.1 0 0 0 64 64h128a32 32 0 0 1 0 64zM768 896H640a32 32 0 0 1 0-64h128a64.1 64.1 0 0 0 64-64V640a32 32 0 1 1 64 0v128a128.1 128.1 0 0 1-128 128zM864 416a32 32 0 0 1-32-32V256a64.1 64.1 0 0 0-64-64H640a32 32 0 0 1 0-64h128a128.1 128.1 0 0 1 128 128v128a32 32 0 0 1-32 32zM800 544H224a32 32 0 0 1 0-64H800a32 32 0 0 1 0 64z" fill="#333333" p-id="3386"></path></svg>
        </span>
    </div>
        <button type="submit">搜索</button>
    </div>
</template>

<script>
    export default {
        name: "SearchComFls",
        methods:{
            search(){
                this.$router.push("/search-view")
            }
        }
    }
</script>

<style scoped>
    .header{
        width: 100vw;
        background: #ffd000;
    }
    .searchHeader{
        width: 96vw;
        height: 35px;
        margin: 0 auto;
        display: flex;
    }
    .location{
        width: 50px;
        text-align: center;
        line-height: 35px;
    }
    .searchHeader>input{
        height: 25px;
        border: 0;
        margin-top: 3px;
        border-radius: 12px;
        flex: 1;
    }
    .erWeiMa{
        width: 30px;
        margin-top: 3px ;
        margin-left: 5px;
    }
    .erWeiMa>img{
        width: 100%;
        height: 100%;
    }
    button{
        height: 25px;
        width: 50px;
        background: #ffd000;
        position: absolute;
        top: 4px;
        right: 47px;
        border-radius: 12.5px;
        border: 0;

    }
</style>